<template>
  <tips-popup
    classNameMask="bg00006"
    :show="show && !keepApi"
    type="middle"
    :showThemeDelete="true"
    @hide="hide"
    class="middle-box box-b"
    style="position: relative">

    <view v-if="hasPsw" class="pbc-wrap">
      <slot>
        <view class="tac pbc-top">请输入支付密码</view>
      </slot>
      <view class="tsce-input">
        <view class="input-warp">
          <input
            v-model="inputCode"
            class="ipt"
            :password="!showPassword"
            placeholder="请输入支付密码"
            :focus="show"
          />
          <view class="addon">
            <view class="icon-warp" @tap="showPassword = !showPassword">
              <server-image
                v-if="!showPassword"
                class="img48"
                name="20230327003.png"
                mode="aspectFill"
              ></server-image>
              <server-image
                v-else
                class="img48"
                name="20230327002.png"
                mode="aspectFill"
              ></server-image>
            </view>
          </view>
        </view>
      </view>
      <view class="pay-btn" :class="{ unpay: inputCode.length < 6 }" @tap="submit">
        {{ btnTxt }}
      </view>
    </view>
    <view v-else class="popup-wrap" style="padding: 50rpx">
      <view class="popup-title">请设置支付密码</view>
      <!-- 3.6.18打包器谜之bug，去除该行 设置 按钮样式失效 -->
      <view />
      <view class="pay-btn" @click="toSetting">前往设置</view>
    </view>

  </tips-popup>
</template>

<script>
import tipsPopup from "@/components/tips-popup.vue";
import { mapState } from 'vuex';

export default {
  name: 'pay-password-popup',
  components: {
    tipsPopup,
  },
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    type: {
      type: [Number, String],
      default: 0,
    },
    price: {
      type: [Number, String],
      default: 0,
    },
    btnTxt: {
      type: String,
      default: '确认支付',
    },
  },
  data() {
    return {
      inputCode: '',
      showPassword: false,
      hasPsw: true,
      keepApi: false,
    };
  },
  computed: {
    ...mapState({
      memberInfo: (state) => state.memberInfo || {},
    }),
  },
  watch: {
    show(val) {
      if (!val) {
        this.hide();
      }
    },
  },
  mounted() {
    // this.checkPayPassword();
    this.$emit('mounted');
  },
  methods: {
    hide() {
      this.inputCode = '';
      this.$emit('hide');
    },
    submit() {
      if (this.inputCode.length >= 6) {
        this.$emit('submit', this.inputCode);
      }
    },
    async checkPayPassword() {
      const vm = this;
      if (vm.keepApi) return;
      const params = {
        id: vm.memberInfo.id,
      };
      vm.keepApi = true;
      uni.showLoading({ mask: true });
      vm.apiUrl
        .memberCheckPayPwd({ data: params })
        .then((res) => {
          const { code,msg:message='' } = res.data
          if (code != 501) vm.hasPsw = res.data.code == 0;
        })
        .finally(() => {
          uni.hideLoading();
          vm.keepApi = false;
        });
    },
    toSetting() {
      this.hide();
      this.toPage('/pages/login/change-safepsw/change-safepsw');
    },
  },
};
</script>

<style lang="less" scoped>
.pbc-wrap {
  padding: 50upx;

  .pbc-top {
    color: #333333;
    font-size: 36upx;
    height: 50upx;
    line-height: 50upx;
    overflow: hidden;
    margin-bottom: 30upx;
  }

  .total {
    color: #f9531a;
    font-size: 60upx;
    line-height: 80upx;
    margin-bottom: 40upx;

    text {
      font-size: 30upx;
    }
  }

  .input-warp {
    /*border-color: #E7E7E7;*/
    border: none;
    background: #f5f5f5;
    height: 100upx;
  }

  .icon-warp {
    border-color: #e7e7e7;
  }

  .ipt {
    font-size: 32upx;
  }
}

.pay-btn {
  height: 90rpx;
  background: #e64e2d;
  border-radius: 10rpx;
  text-align: center;
  color: #ffffff;
  font-size: 36rpx;
  line-height: 90rpx;

  &.unpay {
    background: #e5e5e5;
    color: #ffffff;
  }
}
</style>
